<template>
    <div>Handbook.vue的组件</div>
    <el-input v-model="positionInput" 
        id="searchInputId"
        class="common-layout"
        size="small"
        placeholder="输入关键词搜索位置"
        style="height:25px;width:26%;margin-left:1%;"/>
    <el-button>搜索</el-button>
    <div class="gdmap-container">
        <div id="container"></div>
    </div>
</template>
<script setup lang="ts">
import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
import AMapLoader from "@amap/amap-jsapi-loader";


const positionInput = ref('');
       
        function initMap(){
            window._AMapSecurityConfig = {
                securityJsCode: "e4216233f1d76d4e5244bcf0554e193b", // 密钥
                
            };	// 重要！
            AMapLoader.load({
                key: "f3a205c807ea114828380fbecff655a0", // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: [
                'AMap.AutoComplete',
                'AMap.PlaceSearch'
                ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            })
            .then((AMap) => {
                var map = new AMap.Map("container",{
                    resizeEnable: true,
                    viewMode: "3D", // 是否为3D地图模式
                    zoom: 8, // 初始化地图级别
                    center: [118,30], // 初始化地图中心点位置
                });
                var autoOptions = {
                    input:"searchInputId"
                };
                var auto = new AMap.AutoComplete(autoOptions);
                var placeSearch = new AMap.PlaceSearch({
                    map:map
                })
                auto.on("select",select);
                function select(e) {
                    placeSearch.setCity(e.poi.adcode);
                    placeSearch.search(e.poi.name);  //关键字查询查询
                }
            })
        }
        onMounted(() => {
            console.log("onmounted");
            initMap();
        });
        onUnmounted(() => {
            map?.destroy();
        });
</script>
<style scoped>
.gdmap-container{
    width: 500px;
    height:300px;
}
#container {
  padding: 0px;
  margin: 0px;
  border:1px solid gray;
  width: 100%;
  height: 100%;
}
</style>